<template>
    <div id="employee_index">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>人事管理 </el-breadcrumb-item>
            <el-breadcrumb-item>员工管理</el-breadcrumb-item> </el-breadcrumb><br />

        <el-row>
            <el-col :span="8">
                <el-input style="width: 95%" placeholder="用户名" v-model="searchForm.username" />
            </el-col>
            <el-col :span="8">
                <el-input style="width: 95%" placeholder="姓名" v-model="searchForm.nickName" />
            </el-col>
            <el-col :span="8">
                <el-input style="width: 95%" type="number" :min="0" :max="100" placeholder="年龄"
                    v-model="searchForm.age" />
            </el-col>
        </el-row>
        <br />
        <el-row>
            <el-col :span="12">
                <el-input style="width: 97%" placeholder="住址" v-model="searchForm.address" />
            </el-col>
            <el-col :span="6">
                <el-select v-model="searchForm.sex" @change="$forceUpdate()" placeholder="性别" clearable>
                    <el-option label="女" value="0"></el-option>
                    <el-option label="男" value="1"></el-option>
                </el-select>
            </el-col>
            <el-col :span="6">
                <el-select v-model="searchForm.deptId" placeholder="部门" filterable @change="$forceUpdate()" clearable>
                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <br />
        <el-row>
            <el-col :span="24" style="text-align: left">
                <el-button type="primary" @click="submitSearchForm" style="font-size: 18px">
                    <i class="iconfont icon-r-find" style="font-size: 18px">
                    </i>
                    搜索</el-button>
                <el-button type="success" @click="newVisable = true" style="font-size: 18px">
                    <i class="iconfont icon-r-add" style="font-size: 18px"> </i>
                    新建员工
                </el-button>
            </el-col>
        </el-row>
        <br />
        <!--表格数据-->
        <div class="table">
            <el-table :data="tableData" style="width: 100%" size="medium">
                <el-table-column prop="username" width="130" label="用户名">
                </el-table-column>
                <el-table-column width="100" prop="nickName" label="姓名">
                </el-table-column>
                <el-table-column width="50" prop="sex" label="性别">
                    <template v-slot="scope">
                        {{ scope.row.sex == "1" ? "男" : "女" }}
                    </template>
                </el-table-column>
                <el-table-column width="50" prop="age" label="年龄">
                </el-table-column>
                <el-table-column width="130" :show-overflow-tooltip="true" prop="address" label="住址">
                </el-table-column>
                <el-table-column width="130" :show-overflow-tooltip="true" prop="deptName" label="所属部门">
                </el-table-column>
                <el-table-column width="120" :show-overflow-tooltip="true" prop="createTime" label="入职时间">
                </el-table-column>
                <el-table-column width="120" :show-overflow-tooltip="true" prop="leaveTime" label="离职时间">
                </el-table-column>
                <el-table-column width="120" prop="state" label="状态">
                    <template v-slot="scope">
                        <el-tag v-if="scope.row.state == '0'" type="success">在职</el-tag>
                        <el-tag v-else type="danger">离职</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="450" fixed="right">
                    <template v-slot="scope">
                        <el-button style="font-size: 16px" type="primary" @click="detailBtn(scope.row)">
                            <i style="font-size: 16px" class="iconfont icon-r-find">
                            </i>
                            详情
                        </el-button>
                        <el-button style="font-size: 16px" type="success" @click="editBtn(scope.row.id)">
                            <i style="font-size: 16px" class="iconfont icon-r-edit">
                            </i>
                            修改</el-button>
                        <el-button style="font-size: 16px" type="danger" @click="delBtn(scope.row)">
                            <i style="font-size: 16px" class="iconfont icon-r-delete">
                            </i>
                            删除</el-button>
                        <el-button style="font-size: 16px" type="warning" @click="empRoleBtn(scope.row.id)">
                            <i style="font-size: 16px" class="iconfont icon-r-user1">
                            </i>
                            职务</el-button>

<!--                        <el-button style="font-size: 16px" type="warning" @click="resetPwd(scope.row)">-->
<!--                            <i style="font-size: 16px" class="iconfont icon-r-lock">-->
<!--                            </i>-->
<!--                            重置密码</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 10px 0 15px 0">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="searchForm.currentPage" :page-sizes="[5, 10, 20, 50]"
                    :page-size="searchForm.pageSize" layout="total,sizes, prev, pager, next,jumper"
                    :total="searchForm.total">
                </el-pagination>
            </div>
        </div>
        <!--用户详情-->
        <el-dialog :visible.sync="detailVisable" width="50%">
            <el-descriptions :model="detailForm" column="2" title="员工信息">
                <el-descriptions-item label="用户名">{{
                    detailForm.username
                    }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{
                    detailForm.sex == "1" ? "男" : "女"
                    }}</el-descriptions-item>
                <el-descriptions-item label="年龄">{{
                    detailForm.age
                    }}</el-descriptions-item>
                <el-descriptions-item label="住址">{{
                    detailForm.address
                    }}</el-descriptions-item>
                <el-descriptions-item label="昵称">{{
                    detailForm.nickName
                    }}</el-descriptions-item>
                <el-descriptions-item label="头像"><img :src="BaseApi + detailForm.headImg"
                        width="30px" /></el-descriptions-item>
                <el-descriptions-item label="状态">
                    <el-tag v-if="detailForm.state == '0'" type="success">在职</el-tag>
                    <el-tag v-else type="danger">离职</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="系统管理员">
                    <el-tag v-if="detailForm.isAdmin == true" type="success">是</el-tag>
                    <el-tag v-else type="danger">否</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="描述"> </el-descriptions-item>
                <el-descriptions-item label="录入者">{{
                    detailForm.createby
                    }}</el-descriptions-item>
                <el-descriptions-item label="所属部门">
                    <el-tag v-if="detailForm.deptName" type="warning">{{
                        detailForm.deptName
                        }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="身份证号">{{
                    detailForm.idCard
                    }}</el-descriptions-item>
                <el-descriptions-item label="入职时间">{{
                    detailForm.createTime
                    }}</el-descriptions-item>
                <el-descriptions-item v-if="detailForm.state != '0'" label="离职时间">{{ detailForm.leaveTime }}
                </el-descriptions-item>
                <el-descriptions-item label="角色">
                    <div style="flex-wrap: wrap;display: flex;">

                        <el-tag size="mini" type="success" :key="item.id" v-for="item in detailForm.roleNames">{{ item
                            }}</el-tag>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
            <el-button type="info" @click="detail_down">关闭</el-button>
        </el-dialog>
        <!--录入-->
        <el-dialog title="录入员工" :visible.sync="newVisable" size="mini" @close="dialog_imgClose" label-width="200"
            width="50%">
            <el-form :model="newForm" :rules="rules" ref="newForm" label-width="100px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="头像：">
                            <el-upload class="avatar-uploader" :action="BaseApi +
                                '/personnel_management/employee/uploadImg'
                                " :show-file-list="false" :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="BaseApi + imageUrl" class="avatar" />
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="电话号码：" prop="username">
                            <el-input maxlength="11" v-model="newForm.username"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名：" prop="nickName">
                            <el-input v-model="newForm.nickName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="身份证号：" prop="idCard">
                            <el-input v-model="newForm.idCard" @input="handleIdCardChange"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年龄：">
                            <el-input type="number" min="18" max="70" v-model="newForm.age" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属部门：">
                            <el-select style="width: 200px" v-model="newForm.deptId" placeholder="请选择部门" filterable
                                @change="$forceUpdate()" clearable>
                                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="住址：">
                            <el-input type="text" v-model="newForm.address"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="员工备注：">
                            <textarea cols="20" rows="3" v-model="newForm.info"></textarea>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别：">
                            <el-select style="width: 200px" v-model="newForm.sex" @change="$forceUpdate()"
                                placeholder="请选择性别" clearable>
                                <el-option label="女" value="0"></el-option>
                                <el-option label="男" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submitNewForm('newForm')">提交</el-button>
                    <el-button @click="saveCancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--修改-->
        <el-dialog title="修改员工" @close="dialog_imgClose" :visible.sync="editVisable" size="mini" label-width="200"
            width="50%">
            <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="头像：">
                            <el-upload class="avatar-uploader" :action="BaseApi +
                                '/personnel_management/employee/uploadImg'
                                " :show-file-list="false" :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="BaseApi + imageUrl" class="avatar" />
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="电话号码：" prop="username">
                            <el-input max="11" v-model="editForm.username"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名：" prop="nickName">
                            <el-input v-model="editForm.nickName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="身份证号：" prop="idCard">
                            <el-input v-model="editForm.idCard"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年龄：">
                            <el-input type="number" min="18" max="70" v-model="editForm.age"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属部门：">
                            <el-select style="width: 200px" v-model="editForm.deptId" placeholder="请选择部门" filterable
                                @change="$forceUpdate()" clearable>
                                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="住址：">
                            <el-input type="text" v-model="editForm.address"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="员工备注：">
                            <textarea cols="20" rows="3" v-model="editForm.info"></textarea>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别：">
                            <el-select style="width: 200px" v-model="editForm.sex" @change="$forceUpdate()"
                                placeholder="请选择性别" clearable>
                                <el-option label="女" value="0"></el-option>
                                <el-option label="男" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="状态：">
                            <el-select style="width: 200px" v-model="editForm.state" placeholder="请选择状态" clearable>
                                <el-option label="在职" value="0"></el-option>
                                <el-option label="离职" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item>
                    <el-button type="primary" style="font-size: 18px;" @click="submitEditForm('editForm')"><i
                            class="iconfont icon-r-yes" style="font-size: 18px;"> </i> 提交</el-button>
                    <el-button @click="editCancel" style="font-size: 18px;">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--角色列表-->
        <el-dialog title="分配职务" :visible.sync="empRoleVisable">
            <div>
                <label>已有职务：</label>
                <el-select disabled size="small" v-model="hasRoleIds" :multiple="true" filterable placeholder="没有职务">
                    <el-option v-for="item in allRoles" :key="item.id" :label="item.label" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div>
                <label>更改职务：</label>
                <el-select size="small" name="roleIds" v-model="empRoleForm.empRoleIds" :multiple="true"
                    @change="$forceUpdate()" filterable placeholder="请选择职务">
                    <el-option v-for="item in allRoles" :key="item.id" :label="item.label" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <br>
            <el-button type="primary" @click="submitRoleBtn" style="font-size: 18px;">
                <i class="iconfont icon-r-yes" style="font-size: 18px;"> </i> 提交</el-button>
            <el-button @click="roleBtnCancel" style="font-size: 18px;">取消</el-button>
        </el-dialog>
        <!--重置密码-->
        <el-dialog title="重置密码" v-model="resetPwdForm" :visible.sync="resetPwdVisable">
            <el-form>
                <el-form-item label="密码：">
                    <el-input style="width: 75%; margin: 0 auto; padding: 0" type="password" v-model="resetPwdForm.code"
                        placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-button type="primary" @click="submitResetPwd" style="font-size: 18px;">
                    <i class="iconfont icon-r-yes" style="font-size: 18px;"> </i>
                    确定</el-button>
                <el-button @click="resetPwdVisable = false" style="font-size: 18px;">取消</el-button>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { listByQo } from "@/api/personnel_management/department/deptApi";
import { popup } from "@/assets/js/common";
import {
    deactivate,
    detail,
    editBtnClick,
    pageByQo,
    resetPwd,
    save,
    update,
} from "@/api/personnel_management/employee/empApi";
import {
    getAllRole,
    queryRoleIdsByEid,
    saveRoleEmp,
} from "@/api/system/role/roleApi";
import { clearCookie, loginEmp } from "@/assets/js/auth";

export default {
    name: 'List',
    data() {
        // 电话号码校验
        const validatePhone = (rule, value, callback) => {
            const phoneReg = /^1[3-9]\d{9}$/
            if (!value) {
                callback(new Error('请输入电话号码'))
            } else if (!phoneReg.test(value)) {
                callback(new Error('请输入正确的手机号码'))
            } else {
                callback()
            }
        }
        // 身份证号校验
        const validateIdCard = (rule, value, callback) => {
            const idCardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
            if (!value) {
                callback(new Error('请输入身份证号'))
            } else if (!idCardReg.test(value)) {
                callback(new Error('请输入正确的身份证号'))
            } else {
                callback()
            }
        }
        // 姓名校验
        const validateName = (rule, value, callback) => {
            const nameReg = /^[\u4e00-\u9fa5]{2,}$/
            if (!value) {
                callback(new Error('请输入姓名'))
            } else if (!nameReg.test(value)) {
                callback(new Error('请输入正确的姓名（至少2个汉字）'))
            } else {
                callback()
            }
        }
        return {
            BaseApi: this.$store.state.BaseApi,
            detailVisable: false,
            newVisable: false,
            editVisable: false,
            empRoleForm: {},
            hasRoleIds: [],
            allRoles: [],
            detailForm: {},
            searchForm: {},
            editForm: {},
            options: [],
            tableData: [],
            resetPwdVisable: false,
            newForm: {},
            empRoleVisable: false,
            checked_keys: [],
            roles: [],
            resetPwdForm: {},
            rules: {
                username: [
                    { required: true, validator: validatePhone, trigger: 'blur' }
                ],
                nickName: [
                    { required: true, validator: validateName, trigger: 'blur' }
                ],
                idCard: [
                    { required: true, validator: validateIdCard, trigger: 'blur' }
                ]
            },
            /*上传头像*/
            imageUrl: "",
        };
    },
    methods: {
        deptAll() {
            listByQo({}).then((res) => {
                res = res.data;
                if (res.code == 200) {
                    this.options = res.data;
                } else {
                    popup(res.msg, "error");
                }
            });
        },
        getRoleAll() {
            getAllRole().then((res) => {
                res = res.data;
                if (res.code == 200) {
                    this.allRoles = res.data;
                } else {
                    popup(res.msg, "warning");
                }
            });
        },
        init() {
            pageByQo(this.searchForm).then((res) => {
                res = res.data;
                if (res.code == 200) {
                    this.tableData = res.data.records;
                    this.searchForm.total = res.data.total;
                    this.searchForm.pageSize = res.data.size;
                    this.searchForm.currentPage = res.data.current;
                } else {
                    popup(res.msg, "error");
                }
            });
        },
        /*分页*/
        handleSizeChange(val) {
            this.searchForm.pageSize = val;
            this.init();
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.searchForm.currentPage = val;
            this.init();
            console.log(`当前页: ${val}`);
        },
        submitSearchForm() {
            this.init();
        },
        detailBtn(row) {
            detail(row.id).then((res) => {
                res = res.data;
                if (res.code == 200) {
                    this.detailForm = res.data;
                    this.detailForm.deptName = row.deptName;
                    this.detailVisable = true;
                } else {
                    popup(res.msg, "error");
                }
            });
            console.log(this.detailForm);
        },
        detail_down() {
            this.detailForm = {};
            this.detailVisable = false;
        },
        /*上传头像*/
        handleAvatarSuccess(res) {
            this.imageUrl = res.url;
        },
        beforeAvatarUpload(file) {
            const isJPG =
                file.type === "image/jpeg" || file.type === "image/png";
            const isLt2M = file.size / 1024 / 1024 < 3;
            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 3MB!");
            }
            return isJPG && isLt2M;
        },
        submitNewForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.newForm.headImg = this.imageUrl;
                    save(this.newForm).then((res) => {
                        res = res.data;
                        if (res.code == 200) {
                            popup("操作成功");
                            this.newForm = {};
                            this.imageUrl = "";
                            this.newVisable = false;
                            this.init();
                        } else {
                            popup(res.msg, "error");
                        }
                    });
                }
            });
        },
        saveCancel() {
            this.newVisable = false;
            this.imageUrl = "";
            this.$refs["newForm"].resetFields();
        },
        /*修改员工信息*/
        editCancel() {
            this.editVisable = false;
            this.imageUrl = "";
            this.$refs["editForm"].resetFields();
            this.editForm = {};
        },
        editBtn(id) {
            editBtnClick(id).then((res) => {
                res = res.data;
                if (res.code == 200) {
                    this.editForm = { ...res.data };
                    console.log(this.editForm);
                    this.imageUrl = this.editForm.headImg;
                    this.editVisable = true;
                } else {
                    popup(res.msg, "error");
                }
            });
        },
        submitEditForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.editForm.headImg = this.imageUrl;
                    update(this.editForm).then((res) => {
                        res = res.data;
                        if (res.code == 200) {
                            popup("操作成功");
                            this.editForm = {};
                            this.imageUrl = "";
                            this.editVisable = false;
                            this.init();
                        } else {
                            popup(res.msg, "error");
                        }
                    });
                }
            });
        },
        /*离职*/
        delBtn(row) {
            this.$confirm("确定要将该员工办理离职?", "警示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    if (row.state == "1") {
                        popup("已是离职状态", "warning");
                        return;
                    }
                    deactivate(row.id).then((res) => {
                        res = res.data;
                        if (res.code == 200) {
                            popup("操作成功");
                            this.init();
                        } else {
                            popup(res.msg, "error");
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消操作",
                    });
                });
        },
        dialog_imgClose() {
            this.imageUrl = "";
        },
        /*分配角色按钮*/
        empRoleBtn(id) {
            this.empRoleForm.eid = id;
            /*根据员工编号查询角色编号集合*/
            queryRoleIdsByEid(id).then((res) => {
                res = res.data;
                if (res.code == 200) {
                    this.empRoleForm.empRoleIds = res.data;
                    this.hasRoleIds = res.data;
                    this.empRoleVisable = true;
                } else {
                    popup(res.msg, "warning");
                }
            });
            this.empRoleVisable = true;
        },
        submitRoleBtn() {
            if (
                JSON.stringify(this.hasRoleIds) ===
                JSON.stringify(this.empRoleForm.empRoleIds)
            ) {
                popup("你未做改动...", "warning");
            } else {
                this.$confirm("确定修改员工的职务?", "警示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.empRoleForm.empRoleIds =
                            this.empRoleForm.empRoleIds.toString();
                        saveRoleEmp(this.empRoleForm).then((res) => {
                            res = res.data;
                            if (res.code == 200) {
                                popup("操作成功");
                                this.hasRoleIds = [];
                                this.empRoleForm = {};
                                this.empRoleVisable = false;
                            } else {
                                this.empRoleForm.empRoleIds = this.hasRoleIds;
                                popup(res.msg, "error");
                            }
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消操作",
                        });
                    });
            }
        },
        roleBtnCancel() {
            this.empRoleVisable = false;
            this.hasRoleIds = [];
            this.empRoleIds = [];
        },
        /*重置密码按钮*/
        resetPwd(row) {
            this.resetPwdForm = {};
            this.resetPwdForm.eid = row.id;
            this.resetPwdVisable = true;
        },
        submitResetPwd() {
            this.$confirm("确定要重置该账户的密码?", "警示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    resetPwd(this.resetPwdForm).then((res) => {
                        res = res.data;
                        if (res.code == 200) {
                            this.resetPwdVisable = false;
                            var emp = loginEmp();
                            if (emp.id == this.resetPwdForm.eid) {
                                clearCookie("employee");
                                clearCookie("token");
                                this.$router.push("/");
                            }
                            this.resetPwdForm = {};
                            popup("密码重置成功");
                        } else {
                            popup(res.msg, "error");
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消操作",
                    });
                });
        },
        // 根据身份证号计算年龄
        calculateAge(idCard) {
            if (!idCard) return
            let birth = ''
            if (idCard.length === 18) {
                birth = idCard.substring(6, 14)
            } else if (idCard.length === 15) {
                birth = '19' + idCard.substring(6, 12)
            }
            if (birth) {
                const year = birth.substring(0, 4)
                const month = birth.substring(4, 6)
                const day = birth.substring(6, 8)
                const birthDate = new Date(year, month - 1, day)
                const today = new Date()
                let age = today.getFullYear() - birthDate.getFullYear()
                const monthDiff = today.getMonth() - birthDate.getMonth()
                if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
                    age--
                }
                this.newForm.age = age
            }
        },
        // 监听身份证号变化
        handleIdCardChange(value) {
            this.calculateAge(value)
        }
    },
    mounted() {
        /*初始化所有部门信息*/
        this.deptAll();
        this.getRoleAll();
        /*初始化表格数据*/
        this.init();
    },
};
</script>
<style>
.searchForm {
    height: 134px;
}

.table {
    margin: 0 auto;
    height: 320px;
}

.pageUtils {
    position: absolute;
    width: 84%;
    margin: 2px auto;
    height: 43px;
}

.searchForm {
    display: inline-block;
    margin: 0 auto;
    height: 51px;
    line-height: 51px;
}

.searchForm .column {
    display: inline-block;
    margin: 0 auto;
    margin-right: 2px;
    line-height: 48px;
    height: 51px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>